<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>

    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
<link rel="stylesheet" href="../static/css/comment.css" th:href="@{/css/comment.css}">
<!--顶部导航-->
<header th:replace="_fragments::header(0)" class="ui inverted attached segment m-shadow-small">
    <div class="ui container">
        <nav class="ui inverted secondary stackable menu">
            <h2 class="ui header teal item m-header-logo">Blog</h2>
            <a href="#" class="m-header-item m-hide-on-mobile item"><i class="small home icon"></i> 首页</a>
            <a href="#" class="m-header-item m-hide-on-mobile item"><i class="small idea icon"></i> 分类</a>
            <a href="#" class="m-header-item m-hide-on-mobile item"><i class="small tag icon"></i> 标签</a>
            <a href="#" class="m-header-item m-hide-on-mobile item"><i class="small clone icon"></i> 归档</a>
            <a href="#" class="m-header-item m-hide-on-mobile item"><i class="small info icon"></i> 关于我</a>
            <div class="right item m-header-item m-hide-on-mobile">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </nav>
    </div>

    <a href="#" class="ui black icon button m-header-toggle-icon m-show-on-mobile toggle">
        <i class="sidebar icon"></i>
    </a>
</header>

<!--中间内容-->
<section class="m-article-container m-padding-tb-large animated fadeIn" th:object="${article}">
    <div class="ui container">
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="https://picsum.photos/50" alt="" class="ui avatar image"
                         th:src="@{${article?.user?.avatar}}">
                    <div class="content">
                        <div class="header">
                            <a href="#" class="header" th:text="*{user.nickname}">Misty</a>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <i class="calendar icon"></i>
                    <span th:text="*{#dates.format(updateTime, 'yyyy-MM-dd')}">2020-2-24</span>
                </div>

                <div class="item">
                    <i class="eye icon"></i> <span th:text="*{views}">123</span>
                </div>
            </div>
        </div>

        <div class="ui attached segment">
            <img src="https://picsum.photos/800/450" alt="" class="ui fluid rounded image"
                 th:src="@{${article.firstPicture}}">
        </div>

        <!--内容-->
        <div class="ui attached padded segment">
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label" th:text="*{flag}">原创</div>
            </div>

            <h2 id="caption" class="ui center aligned header" th:text="*{title}">关于刻意练习的清单</h2>

            <textarea id="contentTextArea" style="display: none;" th:utext="*{content}"></textarea>
            <article id="content" class="m-padding-lr-responsive m-padding-tb-large typo typo-selection">


                <!--/*-->
                <h1 id="p1">标题1</h1>
                <h2 id="p1-1">标题1-1</h2>
                <pre><code class="language-css">p { color: red }</code></pre>

                <p>
                    1. 不论在什么行业或领域，提高技能与能力的最有效方法全都遵循一系列普遍原则，就是刻意练习。成为任何领域高手的关键因素不是文化，不是艺术，不是哲学，不是制度，不是自虐，而是刻意练习。
                </p>
                <p>
                    2. 关于刻意练习，被误读最久的一个概念是“一万小时定律”。事实上，想把自己变成高手，光知道“一万小时”毫无意义，因为真正的关键根本不在训练时间，而是训练的方法。
                </p>
                <p>
                    3. 功夫就在功夫上，“功夫在诗外”就是一句谎言。技能是人脑中的一种硬件结构，是“长”在人脑中的。要高度针对性地重复练习基本功，想要学什么功夫，就应该练什么功夫。
                </p>
                <p>
                    4. 心理学家把人的知识和技能分为层层嵌套的三个圆形区域：最内一层是“舒适区”，是我们已经熟练掌握的各种技能；最外一层是“恐慌区”，是我们暂时无法学会的技能；二者中间则是“学习区”。
                </p>
                <p>
                    5.
                    在“舒适区”做事，叫生活；在“学习区”做事，才叫练习。有效的练习必须发生在“学习区”，一旦你学会了某个东西，就不该在上面继续花时间，要立即转入下一个难度。凡是达到“我闭着眼睛都能……”这个程度的人都废了，高手不会闭着眼睛做事。
                </p>
                <h1 id="p2">标题2</h1>
                <p>
                    6.
                    只有结果可控的领域，刻意练习才有用。股市是不可控的，所以刻意练习预测股市很可能就没用。有严格固定规则的领域，练习的作用最大，比如国际象棋；没有严格规则的领域，练习的作用则非常有限，如编程、航空飞行、广告创意。
                </p>
                <p>
                    7. 把要训练的内容分成有针对性的小块，对每一个小块进行重复练习。艺术家要采风，棋手要打谱，律师要学案例，政客要读历史，科学家要看论文。宁可定期坚持发几篇灌水小文章，也比苦读10年期待一鸣惊人强。
                </p>
                <p>
                    8.
                    刻意练习的关键是随时获得有效的反馈。你需要一个旁观者，他不见得水平比你高，不需要经常跟你谈心，不用激发你的战斗热情，但他必须给你提供三步反馈：演示一遍正确动作，表现一遍错误动作，再演示一遍正确动作。
                </p>
                <p>
                    9. 有效的反馈，应该满足三个条件： 及时，一旦不对马上就有人给你指出来；超脱，对事不对人，反馈者不把你的错误上升到“你这个人行不行”的层面；试错，你犯错误的代价很小。
                </p>
                <p>
                    10. 考试是最好的反馈。熟悉并不等于理解，想要真正理解，唯一的办法是考试和测验。没有经过测验，你的知识只是幻觉。
                </p>
                <h1 id="p3">标题3</h1>
                <p>
                    11.
                    学习时间长不等于用功，决定性因素不是学习时间，而是学习环境。刻意练习不好玩，如果你在打打闹闹中享受练习的过程，那就不是刻意练习。你必须在一个不受打扰的环境中单独学习，调动大量的身体和精神资源，全力投入。特别专注地干一件事才是最酷的。
                </p>
                <p>
                    12.
                    刻意练习最为关键的一点，是敢于迈出从舒适区往外走的那一步。你不但应该在“学习区”刻意练习，你的研究、工作和娱乐都应该在“学习区”。刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。
                </p>
                <!--*/-->
            </article>

            <!--标签-->
            <div class="m-padding-lr-responsive">
                <span class="ui basic teal left pointing label" th:each="tag : *{tags}" th:text="${tag.name}">方法论</span>
            </div>
            <!--赞赏-->
            <div class="ui center aligned basic segment" th:if="*{appreciation}">
                <button id="payBtn" class="ui basic orange circular button">赞赏</button>

                <div id="payPopup" class="ui flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit">
                            <div class="image">
                                <img src="https://via.placeholder.com/110?text=WeChat" alt="" class="ui rounded image">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="https://via.placeholder.com/110?text=WeChat" alt="" class="ui rounded image">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--转载声明-->
        <div class="ui attached positive message" th:if="${article.shareStatement}">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li>作者 <span th:text="*{user?.nickname}"></span> <a href="#" th:href="@{/about}">(联系作者)</a></li>
                        <li>发表时间 <span th:text="*{#dates.format(updateTime, 'yyyy-MM-dd HH:mm')}"></span></li>
                        <li>版权声明</li>
                        <li>转载</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <img src="https://via.placeholder.com/110?text=WeChat" alt=""
                         class="ui right floated rounded bordered image">
                </div>
            </div>
        </div>

        <!--留言区域-->
        <div class="ui bottom attached segment" th:if="*{commentable}">
            <div id="commentContainer" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>

                        <!--/*@thymesVar id="comments" type="java.util.List<org.misty.blog.po.Comment>"*/-->
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img src="https://picsum.photos/50">
                            </a>
                            <div class="content">
                                <a class="author" th:text="${comment.nickname}">Matt</a>
                                <div class="metadata">
                                    <span class="date"
                                          th:text="${#dates.format(comment.createTime ,'yyyy-MM-dd HH:mm')}">
                                        Today at 5:42PM
                                    </span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply" data-comment-id="1" data-nickname="Matt" onclick="replay(this)"
                                       th:attr="data-comment-id=${comment.id}, data-nickname=${comment.nickname}">
                                        回复
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/50">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/50">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/50">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                </div>
            </div>
            <div class="ui form">
                <input type="hidden" name="article.id" th:value="${article.id}">
                <input type="hidden" name="parent.id" value="-1">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-wide-on-mobile m-margin-b-tiny">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" placeholder="姓名" name="nickname">
                        </div>
                    </div>
                    <div class="field m-wide-on-mobile m-margin-b-tiny">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="email" placeholder="邮箱" name="email">
                        </div>
                    </div>
                    <div class="field m-wide-on-mobile m-margin-b-tiny">
                        <button id="commentBtn" type="button" class="ui teal button m-wide-on-mobile"><i
                                class="edit icon"></i>发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--工具条-->
<div class="m-padding-tiny m-fixed m-right-bottom m-hide-on-mobile">
    <div class="ui vertical icon buttons">
        <button id="tocBtn" type="button" class="ui teal button">目录</button>
        <a href="#commentContainer" class="ui teal button">留言</a>
        <button id="wechatBtn" type="button" class="ui icon button"><i class="weixin icon"></i></button>
        <a id="upBtn" href="#" class="ui button"><i class="chevron up icon"></i></a>
    </div>

    <div id="tocPopup" class="ui flowing popup transition hidden m-padding-none" style="width: 250px;">
        <div class="m-margin-tb-tiny"
             style="position: relative;overflow: hidden; line-height: 1.8em; padding-left: 8px;"></div>
    </div>

    <div id="wechatPopup" class="ui flowing popup transition hidden">
        <!--        <img src="https://via.placeholder.com/120?text=WeChat" alt="" class="ui rounded image">-->
    </div>
</div>

<!--footer-->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment m-footer">
    <div class="ui container center aligned">
        <div class="ui stackable grid divided inverted">
            <!--二维码-->
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="https://via.placeholder.com/110?text=WeChat" class="ui rounded image" alt="">
                    </div>
                </div>
            </div>
            <!--二维码-->

            <!--最新博客-->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spacing">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事 (User Story)</a>
                    <a href="#" class="item">用户故事 (User Story)</a>
                    <a href="#" class="item">用户故事 (User Story)</a>
                </div>
            </div>
            <!--最新博客-->

            <!--联系我-->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spacing">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email:</a>
                    <a href="#" class="item">QQ:</a>
                </div>
            </div>
            <!--联系我-->

            <!--关于-->
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spacing">关于</h4>
                <p class="m-text-thin m-text-spacing m-opacity-80">這是我的個人博客</p>
            </div>
            <!--关于-->

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spacing m-opacity-60">by Misty</p>
    </div>
</footer>

<!--/*/ <th:block th:replace="_fragments::scripts"> /*/-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<!--/*/ </th:block> /*/-->

<!--/*/ <th:block th:replace="_fragments::scripts-md"> /*/-->
<script src="../static/lib/editormd/editormd.js"></script>
<script src="../static/lib/editormd/lib/marked.min.js"></script>
<!--<script src="../static/lib/editormd/lib/prettify.min.js"></script>-->
<!--/*/ </th:block> /*/-->

<script>
    if (!window.location.origin) {
        window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
    }

    const userAgent = window.navigator.userAgent;
    const isEdge = userAgent.indexOf("Edge") !== -1;
    const isIE = userAgent.indexOf('NET') !== -1 && userAgent.indexOf("rv") !== -1;

    $("header > a.toggle.button").click(function () {
        $(".m-header-item").toggleClass('m-hide-on-mobile');
        return false
    });

    $("#upBtn").click(function () {
        if (isEdge || isIE) {
            const scrollToTop = () => {
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(scrollTop);
                if (scrollTop > 0) {
                    window.requestAnimationFrame(scrollToTop);
                    window.scrollTo(0, scrollTop - scrollTop / 8)
                }
            };
            scrollToTop();
        } else {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }
        return false
    });

    $("#payBtn").popup({
        popup: $("#payPopup"),
        on: 'click',
        position: 'bottom center'
    });

    $("#tocBtn").popup({
        popup: $("#tocPopup"),
        on: 'click',
        position: 'left center'
    });

    $("#wechatBtn").popup({
        popup: $("#wechatPopup"),
        // on: 'focus',
        position: 'left center'
    });

    $("#commentBtn").click(function () {
        const valid = $(".ui.form").form('validate form');
        if (valid) {
            console.log('评论校验成功');
            publishComment();
        } else {
            console.log('评论校验失败');
        }
    });

    $(".ui.form").form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }]
            },
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入您的昵称'
                }]
            },
            email: {
                identifier: 'email',
                rules: [{
                    type: 'empty',
                    prompt: '请输入您的邮箱',
                }, {
                    type: 'email',
                    prompt: '请输入正确的邮箱地址'
                }]
            }
        }
    });

    $(function () {
        // 生成二维码
        const url = window.location.origin + window.location.pathname;
        console.log(url);
        new QRCode("wechatPopup", {
            text: url,
            width: 100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

        // Markdown转HTML
        editormd.markdownToHTML("content", {
            markdown: $("#contentTextArea").text(),
            emoji: true,
            taskList: true,
            text: true,
            flowChart: false,
            sequenceDiagram: false,
            previewCodeHighlight: false, // 禁用prettyPrint语法高亮
        });

        // 生成目录，必须在Markdown转换之后
        tocbot.init({
            tocSelector: '#tocPopup > div',
            contentSelector: '#content',
            headingSelector: 'h1, h2, h3, h4',
            hasInnerContainers: true,
        });

        // 语法高亮，必须在Markdown转换之后
        Prism.highlightAllUnder(document.querySelector("#content"));
    });

</script>
<script th:inline="javascript">
    $(function () {
        $("#commentContainer").load(/*[[@{/comments/{id}(id=${article.id})}]]*/ "");
    });

    function publishComment() {
        const data = {
            "parent.id": $("[name='parent.id']").val(),
            "article.id": $("[name='article.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
            "content": $("[name='content']").val()
        };
        console.log(data);
        $("#commentContainer").load(/*[[@{/comments}]]*/ "", data, function (responseText, statusText, xhr) {
            console.log(responseText, statusText);
            clearCommentForm();
        });
    }

    function clearCommentForm() {
        $("[name='content']").attr('placeholder', '请输入评论信息...').val('');
        $("[name='parent.id']").val(-1);
        $("[name='nickname']").val('');
        $("[name='email']").val('');
    }

    function replay(obj) {
        console.log(obj);
        const $obj = $(obj);
        const cId = $obj.data('comment-id');
        const nickname = $obj.data('nickname');
        console.log(cId, nickname);
        $("[name='parent.id']").val(cId || -1);
        $("[name='content']").attr('placeholder', '@' + nickname).focus();
        return false;
    }
</script>
</body>
</html>
